<template>
  <div id='hisProcessRecord'>
    <span class="timeline-title">{{customTitle}}</span>
    <el-timeline>
      <el-timeline-item placement="top" icon="el-icon-check" v-for="item in  sort1 ?sortData1:hisProcessRecordData1"
        :key="item.id" color="#25b113">
        <el-card>
          <div class="caller-item">
            <div class="caller-main caller-fl">
              <p>
                <strong>{{item.assigneeName}}</strong>
              </p>
              <p class="caller-adds">{{item.actName}}</p>
            </div>
            <p class="caller-text caller-cl">附件：
              <em style="cursor: pointer" @click="viewAttatchment(item.actId)">查看</em>
            </p>
            <p class="caller-text">处理状态：
              <em>{{dataDictionaryFilter(item.state, dataDictionaryList['ProcessRecordState'] )}}</em>
            </p>
            <p class="caller-text">处理结果：
              <em>{{dataDictionaryFilter(item.aproveAdvice, dataDictionaryList['processResult'])}}</em>
            </p>
            <div class="caller-text" v-if="item.activityDfId=='subProcess' || item.activityDfId=='jiandu'">意见：<div
                v-html="item.description"></div>
            </div>
            <p class="caller-text" v-if="item.activityDfId!='subProcess' && item.activityDfId !='jiandu'">
              意见：{{item.description}}</p>
            <p class="caller-time">开始时间：{{item.startTime}}</p>
            <p class="caller-time" style="margin-bottom:10px">结束时间：{{item.endTime}}</p>

          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-dialog title="流程附件" v-model="viewUploadVisible" :append-to-body='true' class="customDialog" width="40%">
      <FileUpload :businessId="taskId" :showUpButton="false" style="width: 100%"></FileUpload>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { ref, onMounted, toRefs, reactive, nextTick, defineComponent } from 'vue'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import { workflowApi } from '/@/api/workflowapi'
import { systemApi } from '/@/api/systemapi'
import { getCodeList } from '/@/utils/cacheDict'
import FileUpload from '/@/components/fileUpload/index.vue'
export default defineComponent ({
	props: {
		processId: {
			type: String,
			default: () => '0'
		},
		customTitle: {
			type: String,
			default: () => {
				return "处理记录";
			}
		}
  },
  components: { FileUpload },
	setup(props, ctx) {
    const processdetailfootRef = ref()
    const viewUpload = ref()
		const state = reactive({
			visible: false,
			formData: {},
			dataDictionaryList: {},
			sort1: false,
			hisProcessRecordData1: [],
      sortData1: [],
      viewUploadVisible: false,
      taskId: ''
		})

		// 页面加载时
		onMounted(() => {
			// 列表查询
			getCodeList(state, ["ProcessRecordState", "processResult"])
			workflowApi().getHisTaskByProcessId(props.processId).then(data => {
				if (data.code === 0) {
					state.hisProcessRecordData1 = data.result;
					state.hisProcessRecordData1.forEach(val => {
						state.sortData1.unshift(val);
					});
				}
			}).catch(() => {})
		})
		//数据字典回显
		const dataDictionaryFilter = (msg: any, obj: any) => {
			if (obj) {
				return obj[msg]
			}
    }
    const viewAttatchment = (actId: any) => {
      state.viewUploadVisible = true;
        state.taskId = actId
    }
		return{
			dataDictionaryFilter,
      processdetailfootRef,
      viewUpload,
      viewAttatchment,
			...toRefs(state),
		}
	}
})
</script>

<style scoped lang="scss">
#hisProcessRecord {
  .timeline-title-box-auto {
    max-height: 100% !important;
  }
  .timeline-title-box {
    width: 100%;
    min-height: 250px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    :deep(.timeline-title) {
      font-size: 14px;
      line-height: 12px;
      font-size: 14px;
      margin: 15px 0px 17px 20px;
      display: inline-block;
      font-weight: 900;
      padding-left: 10px;
      border-left: 3px solid red;
    }
    .el-timeline {
      padding-left: 15px;
      padding-right: 8px;

      .el-timeline-item__timestamp.is-top {
        padding-top: 0px;
      }
      .el-card {
        border: 1px solid #dbdfe6;
        background: #ffffff;
      }
      .el-card__body:before {
        position: absolute;
        left: 20px;
        top: 8px;
        border-left: 4px solid transparent;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-right: 4px solid #d5d5d5;
        content: " ";
        display: block;
        width: 0;
        height: 0;
      }
      .el-card__body:after {
        width: 8px;
        height: 8px;
        position: absolute;
        top: 8px;
        left: 21px;
        border-left: 4px solid transparent;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-right: 4px solid #fbfbfb;
        content: "";
      }
      .el-card__body {
        padding: 10px;
        word-break: break-all;
        .caller-item {
          float: left;

          .caller-img {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            margin-right: 10px;
            float: left;
          }
          .caller-fl {
            float: left;
            position: relative;
            width: 100%;

            p {
              line-height: 100%;
              padding: 4px 0;
              margin: 0px;
              font-size: 16px;
            }
            .caller-adds {
              line-height: 15px;
              font-size: 12px;
              color: #393939;
            }
            .caller-append {
              position: absolute;
              top: 25px;
              right: -8px;
              em {
                margin-left: 5px;
              }
            }
          }
          p em {
            color: #3e9dff;
            font-style: normal;
          }
          .caller-text {
            width: 100%;
            display: block;
            float: left;
            font-size: 14px;
            margin: 10px 0px 0px 5px;
          }
          .caller-time {
            display: block;
            float: left;
            margin: 10px 0 0 5px;
            // margin-top: 10px;
            // margin-left: 5px;
            font-size: 12px;
            color: #a3a4a4;
          }
          .caller-time-end {
            margin: 10px 0 10px 5px;
          }
        }
      }
    }
  }
}
</style>